{extend name="article/add_base" /}

{block name="form"}
<style>
    #bannerImg {
        width: 825px;
        height: 350px;
    }
</style>
<form class="layui-form">
    <div class="layui-form-item">
        <label for="title" class="layui-form-label">
        </label>
        <img id="bannerImg" src="" lay-verify="image_url">
    </div>
    <div class="layui-form-item">
        <label for="title" class="layui-form-label">
            <span class="x-red">*</span>上传图片
        </label>
        <div class="layui-input-inline" style="width: 600px">
            <button type="button" class="layui-btn" id="bannerUpload">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <label for="hyperlink" class="layui-form-label">相关链接</label>
        <div class="layui-input-inline" style="width: 600px">
            <input type="text" id="hyperlink" name="hyperlink" required="" lay-verify="hyperlink" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">跳转链接</label>
        <div class="layui-input-inline" style="width: 150px">
            <!--            <input lay-filter="is_jump" type="checkbox" name="is_jump" lay-skin="switch" lay-text="开启|关闭">-->
            <input lay-filter="is_jump" type="radio" name="is_jump" value=1 title="开启">
            <input id="is_jump_off" lay-filter="is_jump" type="radio" name="is_jump" value=0 title="关闭" checked>
        </div>
        <div class="layui-form-mid layui-word-aux">
            <span class="x-red">*</span>开启：访问者点击标题，将直接跳转到相关链接；关闭：相关链接将被添加到文章末尾
        </div>
    </div>
    <div class="layui-form-item">
        <label for="title" class="layui-form-label">
            <span class="x-red">*</span>文章标题
        </label>
        <div class="layui-input-inline" style="width: 600px">
            <input type="text" id="title" name="title" required="" lay-verify="title" autocomplete="off"
                   class="layui-input"></div>
        <div class="layui-form-mid layui-word-aux">
            <span class="x-red">*</span>文章标题必填
        </div>
    </div>
    <div class="layui-form-item">
        <label for="item_number" class="layui-form-label">
            项目编号</label>
        <div class="layui-input-inline">
            <input type="text" id="item_number" name="item_number" required="" lay-verify=""
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="author" class="layui-form-label">
            信息来源</label>
        <div class="layui-input-inline">
            <input type="text" id="author" name="author" required="" lay-verify=""
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">
            文章内容
        </label>
        <div class="layui-input-block">
            <textarea name="content" id="edit"></textarea>
        </div>
    </div>

    <div class="layui-form-item" id="file_list" style="display: none">
        <label for="title" class="layui-form-label">附件列表：</label>
        <table class="layui-table layui-form layui-input-inline" style="width: 800px">
        </table>
    </div>
    <div class="layui-form-item">
        <label for="title" class="layui-form-label">
            <span class="x-red">*</span>上传附件
        </label>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" id="fileUpload">
                <i class="layui-icon">&#xe67c;</i>上传附件
            </button>
        </div>
        <div class="layui-form-mid layui-word-aux">
            <span class="x-red">*</span>仅支持word/excel/ppt
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-btn" lay-filter="add" lay-submit="">保存文章</div>
    </div>
</form>
{/block}


{block name="js"}
<script src="_ADMIN_/common.js"></script>
<script>
    const url =
        {
            bannerImageUploadUrl: '/admin/image/bannerUpload',
            tinymceUrl: '/admin/tinymce/tinymce',
            fileUpload: '/admin/file/upload',
            addUrl: '/admin/banner/add'
        };
    let file = []

    Tinymce(url.tinymceUrl, (edit, layui) => {
        $ = layui.jquery;
        let form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            image_url = '',
            bannerImg = $('#bannerImg')

        bannerImg.hide()
        upload.render({
            elem: '#bannerUpload',
            accept: 'image',
            exts: 'jpg|png|gif|bmp|jpeg',
            url: url.bannerImageUploadUrl,
            done: (res) => {
                image_url = res.data.src
                if (image_url.length === 0) {
                    layer.msg('图片上传失败', {icon: 5})
                    return
                }

                bannerImg.attr('src', image_url).show();
            },
            error: () => {
                layer.msg('图片上传失败', {icon: 5})
            }
        })

        upload.render({
            elem: '#fileUpload',
            url: url.fileUpload,
            accept: 'file',
            exts: 'doc|docx|xlsx|xls|pptx|ppt',
            size: 2048,
            done: res => {
                file.push({
                    name: res.data.name,
                    src: res.data.src
                });
                render(file)
            }
        })

        //自定义验证规则
        let url_reg = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/
        form.verify({
            title: (value) => {
                if (value.length < 4) {
                    return '文章标题至少得4个字符啊';
                }
            },
            hyperlink: (value) => {
                if (value.length !== 0 && !url_reg.test(value)) {
                    return '相关链接格式不正确'
                }
            }
        });

        form.on('radio(is_jump)', function (data) {
            if (parseInt(data.value) === 1) {
                let hyperlink = $("#hyperlink").val(),
                    is_jump_off = $('#is_jump_off')
                if (hyperlink.length === 0) {
                    layer.msg('相关链接不能为空', {icon: 2})
                    is_jump_off.prop('checked', true)
                    form.render()
                    return false
                }
                if (!url_reg.test(hyperlink)) {
                    layer.msg('相关链接格式不正确', {icon: 2});
                    is_jump_off.prop('checked', true)
                    form.render()
                    return false
                }
            }
        })

        //监听提交
        form.on('submit(add)',
            (data) => {
                if (image_url.length === 0) {
                    layer.msg('必须上传图片', {icon: 5})
                    return
                }
                data = data.field
                data.image_url = image_url
                data.content = edit.getContent()
                $.post(url.addUrl, data, (res) => {
                    if (res.status === config.success) {
                        layer.alert("添加成功", {icon: 6}, () => {
                            xadmin.close();
                            xadmin.father_reload();
                        });
                    } else {
                        layer.msg(res.message, {icon: 2})
                    }
                });
                return false;
            });
    })

    function delFile(obj, i) {
        $(obj).parent().parent().remove()
        file.splice(i, 1)
        if (file.length === 0) {
            $('#file_list').hide()
        }
    }

    function render(arr) {
        let file_list = $('#file_list'),
            file_list_table = $('#file_list table'),
            html = ''
        $.each(arr, (i, v) => {
            html = html +
                `<tr>
                        <td style="min-width: 800px">
                            ${v.name} <a href="javascript:;" style="color: red" onclick="delFile(this,${i})"> 删除</a>
                        </td>
                    </tr>`
        })
        file_list_table.html(html)
        file_list.show()
    }
</script>
{/block}
